<template>
  <div>
    <el-col>
      <el-col :style="bgSt" class="bg"></el-col>
      <el-col class="header">
        <el-link @click="$router.push('/')" :underline="false">返回上一页</el-link>
      </el-col>
      <el-col :span="20" style="height: 400px;margin: 0 auto" class="video-msg">
        <el-col>
          <el-row>
            <el-col :span="5" style="margin-top: 40px">
              <el-card style="height: 330px;width: 100%">
                <el-image style="height: 100%" :src="videoItem.vod_pic"></el-image>
              </el-card>
            </el-col>

            <el-col :span="18" style="margin-left: 40px;margin-top: 40px;color: white">
              <span style="font-size: 35px;padding: 0">{{ videoItem.vod_name }}</span>
              <el-row>
                <el-col :span="10">
                  <p>导演: {{ videoItem.vod_director }}</p>
                  <p>地区: {{ videoItem.vod_area }}</p>
                  <p>分类: {{ videoItem.type_name }}</p>
                  <p>时间: {{ videoItem.vod_pubdate }}</p>
                </el-col>
                <el-col :span="10">
                  <p>语言: {{ videoItem.vod_lang }}</p>
                  <p>类型: {{ videoItem.vod_tag }}</p>
                  <p>年代: {{ videoItem.vod_year }}</p>
                </el-col>
                <el-col
                    style="height: 60px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis;-webkit-line-clamp: 2">
                  <p>
                    剧情: {{ videoItem.vod_content }}
                  </p>
                </el-col>

                <el-col style="margin-top: 30px">
                  <el-button style="width: 200px">立即播放</el-button>
                </el-col>
              </el-row>

            </el-col>
          </el-row>

        </el-col>
      </el-col>
    </el-col>

    <el-col>
      <el-card style="text-align: center">
        <span style="font-size: 14px;color: red">提示,请不要相信视频中任何广告</span>
      </el-card>
    </el-col>

    <el-col :span="20" style="margin: 20px auto">
      <el-card shadow="hover">
        <p>剧集:</p>
        <el-col style="display: flex;justify-content: left;flex-wrap: wrap;align-items: center">
          <el-button v-for="item in urlList" :key="item" @click="play(item.url)" style="margin-top: 10px;width: 120px">
            {{ item.name }}
          </el-button>

        </el-col>
      </el-card>
    </el-col>
  </div>
</template>

<script>

export default {
  name: "VideoItemView",
  data() {
    return {
      videoItem: {},
      bgSt: {},
      urlList: []
    }
  },
  methods: {
    play(url) {
      //window.openWindow('playVideo', url)
      window.api.send('playVideo', url)
    }
  },
  mounted() {
    const json = JSON.parse(this.$route.query.videoItem)
    this.videoItem = json
    console.log(this.videoItem)
    this.bgSt = {
      backgroundImage: 'url(' + json.vod_pic + ')',
    }

    let urlJson = this.videoItem.vod_play_url
    let iframeUrlArr = urlJson.split('$$$')
    let urlArr = iframeUrlArr[1].split('#')
    let urlList = []
    for (let i = 0; i < urlArr.length; i++) {
      let url = urlArr[i].split('$')
      urlList.push({
        name: url[0],
        url: url[1]
      })
    }
    this.urlList = urlList

  }
}
</script>

<style scoped>

.header {
  /*style="height: 60px;box-shadow: #C0C4CC"*/
  height: 60px;
  position: fixed;
  z-index: 10;
  background-color: rgba(54, 27, 27, 0.5);
  width: 100%;
  top: 0;
}

.video-msg {
  position: absolute;
  top: 50px;
  left: 100px;
}

.bg {
  text-align: center;
  position: relative;
  height: 460px;
  /*可以加上下面注释代码，可以让边缘不那么唐突*/
  /* background: url('timg.jpg') no-repeat;
  background-size:cover; */
  /*也可以加入背景透明，使页面不那么唐突*/
  /*background-color: rgba(0, 0, 0, .5);*/
  content: '';
  filter: blur(15px);
  background-size: cover;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.bg::before {


}
</style>
